<template>
  <div class="authorizedAccount">
    <div class="cp-title">
      <span>授权账号</span>
      <i class="el-icon-close" @click="closePopup"></i>
    </div>
    <div class="aa-containt">
      <div class="aa-name">
        <span>角色名称：</span>
        <span>{{ row.roleName }}</span>
      </div>
      <div class="aa-select">
        <span class="aa-select-span">选择人员</span>
        <div @click="openChoiceFun">
          <span>选择人员</span>
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <!-- 列表 -->
      <div class="aa-listDiv">
        <div class="aa-liTitle">
          <span>已选{{ exisRoleList.length }}人</span>
        </div>
        <div v-if="exisRoleList.length < 1" class="aa-noData">暂无数据</div>
        <ul class="aa-ul">
          <li v-for="(item, index) in exisRoleList" :key="item.id" class="aa-liLine">
            <span>{{ item.realName }}</span>
            <span>{{ item.mobile }}</span>
            <span>{{ item.position }}</span>
            <span><i @click="deleteAccountsFun(index)">删除</i></span>
          </li>
        </ul>
      </div>
      <!-- btn -->
      <div class="aa-btn">
        <span @click="closePopup">取消</span>
        <span @click="accountsHandleFun()">保存</span>
      </div>
    </div>

    <!-- 选择人员的弹框 -->
    <el-dialog
      title="设置企业子管理员"
      :visible.sync="personalVisible"
      width="710px"
      :before-close="handleClose"
      append-to-body
    >
      <!-- 选择人员 -->
      <div class="aa-transfer">
        <!-- 左边 -->
        <div class="aa-transfer-left">
          <el-input
            v-model="searchInput"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            class="aa-transfer-search"
            @input="searchFun"
          ></el-input>
          <ul v-infinite-scroll="load">
            <div class="all-check">
              <el-checkbox :value="isAllCheck" @change="allCheck()">全选已加载数据</el-checkbox>
            </div>

            <li v-for="item in list" :key="item.id">
              <el-checkbox :value="item.isCheck" @change="checkboxFun(item.id)"></el-checkbox>
              <span class="aa-realName">{{ item.realName }}</span>
              <span class="aa-mobilePhone">{{ item.mobilePhone }}</span>
              <span class="aa-position">{{ item.position }}</span>
            </li>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="aa-transfer-left">
          <div class="aa-transfer-title">已选{{ RGpersonnelList.length }}人</div>
          <ul>
            <li v-for="item in RGpersonnelList" :key="item.id">
              <span class="aa-realName">{{ item.realName }}</span>
              <span class="aa-mobilePhone">{{ item.mobilePhone }}</span>
              <span class="aa-position">{{ item.position }}</span>
              <i class="el-icon-error" @click="deleteCheckBoxFun(item.id)"></i>
            </li>
          </ul>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="personalVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChioceFun()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getAllAdminUser, findByRoleId, accountsHandle } from '@/api/administrator';
  export default {
    props: {
      row: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        isAllCheck: false,
        searchInput: '',
        region: '',
        page: 1,
        total: 0,
        personalVisible: false,
        personnelList: [],
        list: [],
        RGpersonnelList: [], //右边选择的人员
        exisRoleList: [], //已有角色人员列表
        confirmPersonnelList: [], //确认新增的人员
      };
    },
    watch: {
      row() {
        this.findByRoleIdFun();
      },
      isAllCheck(a) {
        if (a) {
          this.list.map(function(item) {
            item.isCheck = true;
          });
          this.RGpersonnelList = this.list;
        } else {
          this.list.map(function(item) {
            item.isCheck = false;
          });
          this.RGpersonnelList = [];
        }
      },
    },
    activated() {},
    mounted() {
      // this.getAllAdminUserFun();
      this.findByRoleIdFun();
    },
    methods: {
      //全选
      allCheck() {
        this.isAllCheck = !this.isAllCheck;
      },
      // 查询角色下的人员
      findByRoleIdFun() {
        let that = this;
        let objData = { roleId: this.row.id, orgId: this.row.businessId };
        findByRoleId(objData).then(res => {
          that.exisRoleList = res.data;
        });
      },
      // 获取所有人员
      getAllAdminUserFun() {
        let that = this;
        let objData = { pageCurrrent: this.page, pageSize: 15 };
        getAllAdminUser(objData).then(res => {
          let list = [];
          if (that.page == 1) {
            list = res.data.records;
          } else {
            list = that.personnelList.concat(res.data.records);
          }
          list.forEach(function(item) {
            item.isCheck = false;
          });
          that.personnelList = list;
          this.list = JSON.parse(JSON.stringify(list));
          that.total = res.data.total;
        });
      },

      // 搜索
      searchFun(value) {
        const list = this.personnelList.filter(item => {
          const searchs = ['realName', 'mobilePhone', 'position'];
          return searchs.reduce((checked, key) => {
            const _checkeed = item[key].indexOf(value) > -1;
            return checked || _checkeed;
          }, false);
        });
        this.list = JSON.parse(JSON.stringify(list));
      },

      // 上拉加载
      load() {
        this.page += 1;
        let total = this.total;
        let pageNum = Math.ceil(total / 15) + 1;
        if (this.page < pageNum) {
          this.getAllAdminUserFun();
        }
      },
      // 左边选中checkbox
      checkboxFun(id) {
        let list2 = [];
        this.list.forEach(item => {
          if (item.id === id) {
            item.isCheck = !item.isCheck;
          }
          if (item.isCheck === true) {
            list2.push(item);
          }
        });
        this.personnelList.forEach(item => {
          item.id === id ? (item.isCheck = !item.isCheck) : null;
        });
        this.RGpersonnelList = list2;
      },

      // 打开人员选择的弹框
      openChoiceFun() {
        this.isAllCheck = false;
        this.RGpersonnelList = [];
        this.getAllAdminUserFun();
        this.list = [];
        this.personalVisible = true;
      },

      // 右边删除选中
      deleteCheckBoxFun(id) {
        this.personnelList.forEach(item => {
          if (item.id == id) {
            item.isCheck = false;
          }
        });
        this.RGpersonnelList = this.RGpersonnelList.filter(item => item.id !== id);
        this.confirmPersonnelList.concat(this.RGpersonnelList);
      },

      // 人员确认
      confirmChioceFun() {
        let list = this.exisRoleList;
        const listRg = this.RGpersonnelList.map(item => ({
          userId: item.id,
          mobile: item.mobilePhone,
          realName: item.realName,
          position: '',
        }));
        const ids = listRg.map(item => item.userId);
        this.exisRoleList = [...list.filter(item => !ids.includes(item.userId)), ...listRg];
        this.personalVisible = false;
      },

      // 保存选择的人员
      accountsHandleFun() {
        let that = this;
        let list = this.exisRoleList;
        let userIdAarr = [];
        list.forEach(function(item) {
          userIdAarr.push(item.userId);
        });

        let userId = userIdAarr.toString();
        let objData = { orgId: this.row.businessId, roleId: this.row.id, userIds: userId };
        accountsHandle(objData).then(res => {
          if (res.status == 200) {
            that.$message.success('保存成功');
            that.findByRoleIdFun();
          } else {
            that.$message.error(res.message);
          }
          that.$emit('changeShow');
        });
      },

      // 删除账号
      deleteAccountsFun(index) {
        this.exisRoleList.splice(index, 1);
      },

      // 关闭弹框
      closePopup() {
        this.$emit('changeShow');
      },
      handleClose() {
        this.personalVisible = false;
        this.page = 1;
      },
    },
  };
</script>

<style lang="scss">
  .el-dialog__body {
    padding: 0 !important;
  }
  .all-check {
    margin-bottom: 10px;
  }
  .authorizedAccount {
    ul {
      padding: 0;
      margin: 0;
      li {
        list-style: none;
      }
    }
  }
  .cp-title {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    color: #34363b;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      font-weight: 800;
    }
  }
  .aa-containt {
    padding: 20px;
    font-size: 14px;
    .aa-name {
      span:nth-child(1) {
        color: #7f848b;
      }
      span:nth-child(2) {
        color: #1e2023;
        padding-left: 15px;
      }
    }
    .aa-select {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .aa-select-span {
        color: #7f848b;
      }
      div {
        width: 407px;
        margin-left: 10px;

        height: 37px;
        line-height: 37px;
        border-radius: 7px;
        border: 2px solid #f4f0f3;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          color: #b4b8be;
        }
        i {
          color: #979698;
        }
      }
    }
    .aa-noData {
      text-align: center;
      padding: 25px 0;
    }
    .aa-listDiv {
      font-size: 14px;
      color: #6d6e6e;
      border-radius: 14px;
      border: 2px solid #f4f0f3;
      padding: 0 0 19px 0;
      width: 410px;
      margin-left: 65px;
      margin-top: 20px;
      .aa-liTitle {
        padding: 17px 15px;
        border-bottom: 1px solid #efeff0;
      }

      .aa-ul {
        max-height: calc(100vh - 350px);
        overflow-y: auto;
        li {
          list-style: none;
        }
        .aa-liLine {
          display: flex;
          align-items: center;
          padding-top: 19px;
          span {
            display: block;
            text-align: center;
          }
          span:nth-child(1) {
            width: 150px;
          }
          span:nth-child(2) {
            width: 160px;
          }
          span:nth-child(3) {
            width: 150px;
          }
          span:nth-child(4) {
            width: 100px;
          }
          i {
            font-style: normal;
            display: flex;
            align-items: center;
          }
          i::before {
            content: '';
            display: block;
            background: url(../../../assets/img/delete.png) no-repeat;
            background-size: 23px 23px;
            width: 23px;
            height: 23px;
            margin-right: 2px;
          }
        }
      }
    }
    .aa-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 30px;
      margin-right: 20px;
      span {
        display: block;
        width: 100px;
        height: 40px;
        cursor: pointer;
        line-height: 40px;
        border-radius: 7px;
        text-align: center;
      }
      span:nth-child(1) {
        border: 1px solid #e8e4e8;
      }
      span:nth-child(2) {
        background: #3771e9;
        color: #fff;
        margin-left: 20px;
      }
    }
  }
  // 选择人员
  .aa-transfer {
    width: 100%;
    // height: 575px;
    background: #efeef1;
    padding: 10px;
    display: flex;
    align-items: center;
    .aa-transfer-left {
      width: 324px;
      height: 488px;
      border-radius: 14px;
      background: #fff;
      margin-left: 15px;
      .aa-transfer-search {
        margin: 15px;
        width: 289px;
      }
      .aa-transfer-title {
        padding: 26px 15px;
      }
      ul {
        padding: 0 15px;
        margin: 0;
        height: 410px;
        overflow-y: auto;
        li {
          list-style: none;
          display: flex;
          align-items: center;
          padding-bottom: 17px;
          span {
            display: block;
            text-align: center;
          }
          .aa-realName {
            width: 80px;
          }
          .aa-mobilePhone {
            width: 120px;
          }
          .aa-position {
            width: 120px;
          }
          i {
            font-size: 18px;
            color: #b8b8b8;
          }
        }
      }
    }
  }
</style>
